<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      /* flex-direction: column; */
      width: 300px;
      height: 300px;
      border: 1px solid red;
    }

    .menu {
      /* flex: 0 0 100px; */
      width: 100px;
      background-color: gray;
    }

    .main {
      flex: 1;
      min-width: 0;

      /* flex: auto; */
      /* overflow: auto; */
      /* min-height: 0; */
      background-color: darkseagreen;
    }

    .content {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<body>



  <div class="container">
    <div class="menu"></div>
    <div class="main">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi provident
        molestias inventore quisquam tempore hic labore esse reprehenderit
        quibusdam, amet nisi nesciunt ab deleniti dolorem tenetur, animi, unde
        alias sint.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi provident
        molestias inventore quisquam tempore hic labore esse reprehenderit
        quibusdam, amet nisi nesciunt ab deleniti dolorem tenetur, animi, unde
        alias sint.
      </div>
    </div>
  </div>
</body>

</html>